<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聊天室</title>
  <style>
    label {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h3>在线订阅话题</h3>
  <div class="topic">
    <label for="sports">体育:</label>
    <input type="checkbox" name="sports" id="sports" value="sports">
    <label for="car">汽车:</label>
    <input type="checkbox" name="car" id="car" value="car">
    <label for="events">时事:</label>
    <input type="checkbox" name="events" id="events" value="events">
    <br />
    <input type="text" placeholder="添加用户名" class="ipt-yhm">
  </div>
  <br /> 发送 channel:
  <input type="text" id="pub" />
  <br /> 发送 message:
  <input type="text" id="pubmess" />
  <br />
  <button class="btn-sx">上线</button>
  <button class="btn-dy">订阅</button>
  <button class="btn-qxdy">取消订阅</button>
  <button id="publish">给某某订阅发送信息</button>
  <button id="btn-qf">群发</button>
  <button id="btn-szyhm">上传自己的用户名</button>
  <button id="btn-dddf">点对点发</button>
  <button id='btn-dk'>断开链接</button>
  <div>
    接受的信息：
    <p class="hint-infor"></p>
  </div>
  <h4>链接情况:</h4>
  <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js
  "></script>
  <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
  <script>
    connect();
    $('.btn-sx').on('click', function () {
      connect();
    });
    //当前用户添加一个channel,订阅话题
    $('.btn-dy').on('click', function () {
      var arr = [];
      var a = $('.topic input');
      for (var i = 0; i < a.length; i++) {
        if ($(a[i]).is(':checked')) {
          arr.push($(a[i]).val());
        }
      }
      socket.emit('subscribe', arr, $('.ipt-yhm').val().trim());
    });
    //取消订阅话题
    $('.btn-qxdy').on('click', function () {
      var arr = [];
      var a = $('.topic input');
      for (var i = 0; i < a.length; i++) {
        if ($(a[i]).is(':checked')) {
          arr.push($(a[i]).val());
        }
      }
      socket.emit('unsubscribe', arr, $('.ipt-yhm').val().trim());
    });
    //群发
    $('#btn-qf').on('click', function () {
      socket.emit('groups', '所有人', $('#pubmess').val().trim());
    });
    //上传自己的用户名
    $('#btn-szyhm').on('click', function () {
      socket.emit('subscribe', $('.ipt-yhm').val().trim());
    });
    //点对点发
    $('#btn-dddf').on('click', function () {
      socket.emit('publish', $('#pub').val().trim(), $('#pubmess').val());
    });
    //当前用户向某一个channel中发布消息,发送消息,指定组发
    $('#publish').on('click', function () {
      socket.emit('publish', $('#pub').val(), $('#pubmess').val());
    });
    // 当与服务器断开链接
    $('#btn-dk').on('click', function () {
      socket.emit('downline', $('.ipt-yhm').val().trim());
    });

    function connect() {
      socket = io.connect('http://127.0.0.1:4000');
      socket.on('connecting', function () {
        var str = '<p>socket正在与服务器建立链接</p>';
        $('body').append(str);
      });
      socket.on('connect', function () {
        var str = '<p>当socket与后端成功建立链接</p>';
        $('body').append(str);
      });
      socket.on('disconnect', function () {
        var str = '<p>当与服务器断开链接</p>';
        $('body').append(str);
      });
      socket.on('reconnect', function () {
        var str = '<p>重新链接并且成功</p>';
        $('body').append(str);
      });
      socket.on('connect_failed', function () {
        var str = '<p>重连失败</p>';
        $('body').append(str);
      });
      //订阅了某个channel的所有用户显示消息  
      socket.on('message', function (message) {
        console.log(message);
        if (message.code < 0) {
          // $('.hint-infor').text(message.username + message.data);
          socket.close(); //发起断连请求  
        } else {
          $('.hint-infor').text(message.data);
        }
      });
    }
  </script>
</body>

</html>